<script setup lang="ts">
import { reactive, ref } from 'vue';

let entityData = [
    {
        image3: "",
        image1: "",
        image2: "",
        image0: "https://spa-1257211777.cos.ap-beijing.myqcloud.com/images/525de490-55cd-42e8-9a6b-13f9c0a7da6b.jpg",
        entityNo: "",
        field11: "field11",
        field22: "field22",
        field33: "",
        field12: "66666",
        field23: "详情",
        field31: "field31",
        field21: "field2111",
        field32: "",
        field13: "0"
    },
    {
        image3: "",
        image1: "",
        image2: "",
        image0: "https://spa-1257211777.cos.ap-beijing.myqcloud.com/images/525de490-55cd-42e8-9a6b-13f9c0a7da6b.jpg",
        entityNo: "",
        field11: "field11",
        field22: "field22",
        field33: "",
        field12: "",
        field23: "详情",
        field31: "field31",
        field21: "field21",
        field32: "",
        field13: "0"
    }
]

let props = {
    entityData
}

// 组件3
/**
 * 定义滑动图片的接口，包含图片路径信息。
 */
interface Slide {
    image: string;
}

/**
 * 存储滑动图片的数组，每项包含一张图片的路径。
 */
const slides: Slide[] = [
    { image: 'path/to/image1.jpg' },
    { image: 'path/to/image2.jpg' },
    { image: 'path/to/image3.jpg' },
];

/**
 * 使用ref创建一个响应式变量，用于存储当前滑动图片的索引。
 */
const currentIndex = ref(0);
const slideWidth = 600;

/**
 * 移动到下一张图片。
 * 通过递增currentIndex的值并使用模运算来循环访问数组中的图片。
 */
const nextSlide = () => {
    currentIndex.value = (currentIndex.value + 1) % slides.length;
};

/**
 * 移动到上一张图片。
 * 通过递减currentIndex的值并使用模运算来循环访问数组中的图片。
 */
const prevSlide = () => {
    currentIndex.value = (currentIndex.value - 1 + slides.length) % slides.length;
};

// 组件4
let model3Active = ref(1)
const onModel3Active = (page: number) => {
    model3Active.value = page
}

</script>


<template>
    <div class="max-box">

        <!-- 组件1 -->
        <div class="model1-box">
            <div v-for="(item, index) in props.entityData" :key="index" class="model1-box-son">
                <div class="row1">
                    <img :src="item.image0" alt="">
                </div>
                <div class="row2">
                    <div class="row21">
                        <div class="li1">
                            <p class="text-overflow">{{ item.field11 }}</p>
                        </div>
                        <div class="li2 color-grey">
                            <p class="text-overflow">{{ item.field21 }}</p>
                            {{ item.field21 && item.field22 && '|' }}
                            <p class="text-overflow">{{ item.field22 }}</p>
                        </div>
                        <div class="li3 color-grey">
                            <p class="text-overflow">{{ item.field31 }}</p>
                        </div>
                    </div>
                    <div class="row22">
                        <button class="text-overflow">{{ item.field23 }}</button>
                    </div>
                </div>
            </div>
            <!-- 组件2，目前合并到1 中 -->
            <div v-if="props.entityData.length > 0" class="model2-box">
                <div class="model2-box-son">
                    <div>
                        <button>电话</button>
                    </div>
                    <div>
                        <button>咨询</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 组件3 -->
        <!-- 目前不使用 -->
        <div v-if="false" class="model3-box">
            <div class="model3-box-son">
                <div class="row1">
                    <div class="li1" :style="{ transform: `translateX(${-currentIndex * slideWidth}px)` }">
                        <div v-for="(slide, index) in slides" :key="index" class="slide">
                            <img :src="slide.image" alt="slide" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 组件4 -->
        <div class="model4-box">
            <div class="model4-box-son">
                <div v-if="props.entityData[0].field11" @click="onModel3Active(1)"
                    :class="model3Active == 1 ? 'active' : ''">
                    <p>{{ props.entityData[0].field11 }}</p>
                </div>
                <div v-if="props.entityData[0].field12" @click="onModel3Active(2)"
                    :class="model3Active == 2 ? 'active' : ''">
                    <p>{{ props.entityData[0].field12 }}</p>
                </div>
                <div v-if="props.entityData[0].field13" @click="onModel3Active(3)"
                    :class="model3Active == 3 ? 'active' : ''">
                    <p>{{ props.entityData[0].field13 }}</p>
                </div>
            </div>
        </div>

        <!-- 组件5 -->
        <div class="model5-box">
            <div class="model5-box-son">
                <div v-if="props.entityData[0].image0" class="row1">
                    <img :src="props.entityData[0].image0" alt="">
                    <span>{{ props.entityData[0].field11 }}</span>
                </div>
                <div v-if="props.entityData[0].image1" class="row2">
                    <img :src="props.entityData[0].image1" alt="">
                    <span>{{ props.entityData[0].field12 }}</span>
                </div>
                <div v-if="props.entityData[0].image2" class="row3">
                    <img :src="props.entityData[0].image2" alt="">
                    <span>{{ props.entityData[0].field13 }}</span>
                </div>
                <div v-if="props.entityData[0].image3" class="row4">
                    <img :src="props.entityData[0].image3" alt="">
                    <span>{{ props.entityData[0].field21 }}</span>
                </div>
            </div>
        </div>

        <!-- 组件6 -->
        <div class="model6-box">
            <div class="model6-box-son">
                <div class="row1">
                    <div class="li1">
                        <img :src="props.entityData[0].image0" alt="">
                    </div>
                    <div class="li2">
                        <div>
                            <p>{{ props.entityData[0].field11 }}</p>
                        </div>
                        <div>
                            <p>{{ props.entityData[0].field12 }}</p>
                        </div>
                    </div>
                </div>
                <div class="row2">
                    <div class="li1">{{ props.entityData[0].field21 }}</div>
                    <div class="li2">{{ props.entityData[0].field22 }}</div>
                </div>
                <div class="row3">
                    <div class="li1">{{ props.entityData[0].field23 }}</div>
                    <div class="li2">{{ props.entityData[0].field31 }}</div>
                </div>
                <div class="row4">
                    <div class="li1">{{ props.entityData[0].field32 }}</div>
                    <div class="li2">{{ props.entityData[0].field33 }}</div>
                </div>
            </div>
        </div>

    </div>
</template>


<style scoped>
.max-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.color-grey {
    color: #bbbbbb;
}

/* 组件1 */
/* #region */
.model1-box {
    width: 100%;
}

.model1-box-son {
    width: 100%;
    height: 8vw;
    display: flex;
    justify-content: space-around;
    margin-bottom: 0.8vw;
}

.model1-box-son .row1 {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.8vw;
}

.model1-box-son .row1 img {
    width: 100%;
}

.model1-box-son .row2 {
    width: 70%;
    height: 100%;
    border-bottom: 0.2vw solid rgb(209, 209, 209);
}

.model1-box-son .row2 .row21 {
    width: 40%;
}

.model1-box-son .row2 .row22 {
    width: 60%;
    display: flex;
    justify-content: end;
}

.model1-box-son .row2 {
    height: 100%;
    display: flex;
    justify-content: space-between;
}

.model1-box-son .row21>div {
    width: 100%;
    height: 33%;
    display: flex;
    align-items: center;
}

.model1-box-son .row21>.li1 {
    width: 100%;
    font-size: 1.2vw;
    font-weight: 600;
}

.model1-box-son .row21>.li2 {
    display: flex;
    justify-content: space-between;
    font-size: 0.8vw;
}

.model1-box-son .row21>.li2 p {
    width: 48%;
}

.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model1-box-son .row21>.li3 {
    width: 100%;
    font-size: 1vw;
}

.model1-box-son .row22 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.model1-box-son .row22>button {
    height: 2.6vw;
    width: 5.8vw;
    font-size: 1.4vw;
    color: #FFFFFF;
    border-radius: 3vw;
    background-color: #4095E5;
    border: none;
    cursor: pointer;
    line-height: 100%;
    text-align: center;
}

/* #endregion */

/* 组件2 */
/* #region */
.model2-box {
    width: 100%;
    height: 8vh;
}

.model2-box-son {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.model2-box-son>div {
    width: 25%;
    height: 60%;
}

.model2-box-son>div>button {
    width: 100%;
    height: 100%;
    border: 1px solid rgb(194, 191, 191);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* #endregion */

/* 组件3 */
/* #region */
.model3-box {
    width: 100%;
    height: 40vh;
}

.model3-box-son {
    width: 100%;
    height: 100%;
    background-color: #4095E5;
}

/* #endregion */

/* 组件4 */
/* #region */
.model4-box {
    width: 100%;
    height: 4vw;
}

.model4-box-son {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    border-top: 1px solid rgb(251, 191, 191);
    border-bottom: 1px solid rgb(251, 191, 191);
}

.model4-box-son>div {
    width: 14%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2vw;
}

.model4-box-son>.active {
    border-bottom: 0.2vw solid rgb(236, 128, 66);
}

/* #endregion */


/* 组件5 */
/* #region */
.model5-box {
    width: 100%;
    height: 10vh;
}

.model5-box-son {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.model5-box-son>div {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.model5-box-son>div:hover {
    box-shadow: 3px 3px 3px rgb(213, 213, 213);
    transition: 0.2s;
}

.model5-box-son>div img {
    width: 40%;
    margin: 0;
    padding: 0;
}

.model5-box-son>div span {
    width: 100%;
    font-size: 1.2vw;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

/* #endregion */


/* 组件6 */
/* #region */

.model6-box {
    width: 100%;
}

.model6-box-son {
    width: 100%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.model6-box-son>div {
    width: 100%;
}

.model6-box-son>.row1 {
    width: 100%;
    height: 30%;
    display: flex;
    align-items: center;
}

.model6-box-son>.row1 .li1 {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model6-box-son>.row1 .li1>img {
    width: 100%;
    height: 100%;
}

.model6-box-son>.row1 .li2 {
    font-size: 1.2vw;
    color: rgb(133, 133, 133);
}

.model6-box-son>.row2 {
    width: 100%;
    height: 40%;
}

.model6-box-son>.row2 .li1,
.model6-box-son>.row3 .li1,
.model6-box-son>.row4 .li1 {
    width: 20%;
    height: 100%;
    font-size: 1vw;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgb(112, 112, 112);
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.model6-box-son>.row2 .li2,
.model6-box-son>.row3 .li2,
.model6-box-son>.row4 .li2 {
    width: 80%;
    height: 100%;
    display: flex;
    font-size: 1.2vw;
    color: rgb(112, 112, 112);
    overflow: hidden;
    text-overflow: ellipsis;
}

.model6-box-son>.row3 {
    width: 100%;
    height: 15%;
}

.model6-box-son>.row4 {
    width: 100%;
    height: 15%;
}

.model6-box-son>.row2,
.model6-box-son>.row3,
.model6-box-son>.row4 {
    display: flex;
    justify-content: space-around;
}


/* #endregion */
</style>
